<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<% String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">

    <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="jquery/bs_pagination/jquery.bs_pagination.min.css">
    <script src="jquery/jquery-1.11.1-min.js" type="text/javascript"></script>
    <script src="jquery/bootstrap_3.3.0/js/bootstrap.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
    <script type="text/javascript" src="jquery/bs_pagination/en.js"></script>
    <script type="text/javascript" src="common/js/common.js"></script>


    <script type="text/javascript">

        $(function () {

            // 全选、反选操作
            $("#checkAll").click(function () {
                $("input[name=checkbox]").prop("checked", this.checked);
            });
            $("#transBody").on("click", $("input[name=checkbox]"), function () {
                // 判断已经选择的框的数量是否和所有选择框的数量一致，如果一致，则代表全选，否则不全选
                $("#checkAll").prop("checked", $("input[name=checkbox]").length === $("input[name=checkbox]:checked").length);
            });

            getTransList(1, 3);

            $("#searchBtn").click(function () {
                // 用隐藏域保存搜索条件
                $("#hidden-searchOwner").val($.trim($("#searchOwner").val()));
                $("#hidden-searchName").val($.trim($("#searchName").val()));
                $("#hidden-searchCustomerName").val($.trim($("#searchCustomerName").val()));
                $("#hidden-searchStage").val($.trim($("#searchStage").val()));
                $("#hidden-searchType").val($.trim($("#searchType").val()));
                $("#hidden-searchSource").val($.trim($("#searchSource").val()));
                $("#hidden-searchContactsName").val($.trim($("#searchContactsName").val()));
                getTransList(1, $("#transPage").bs_pagination('getOption', 'rowsPerPage'));
            })

        });


        function getTransList(pageNo, pageSize) {
            // 每次加载都清空全选框的选中状态
            $("#checkAll").prop("checked", false);

            $("#searchOwner").val($.trim($("#hidden-searchOwner").val()));
            $("#searchName").val($.trim($("#hidden-searchName").val()));
            $("#searchCustomerName").val($.trim($("#hidden-searchCustomerName").val()));
            $("#searchStage").val($.trim($("#hidden-searchStage").val()));
            $("#searchType").val($.trim($("#hidden-searchType").val()));
            $("#searchSource").val($.trim($("#hidden-searchSource").val()));
            $("#searchContactsName").val($.trim($("#hidden-searchContactsName").val()));

            let html = "";
            $.ajax({
                url: "workbench/transaction/getTransList.do",
                data: {
                    "owner": $("#searchOwner").val(),
                    "name": $("#searchName").val(),
                    "customerName": $("#searchCustomerName").val(),
                    "stage": $("#searchStage").val(),
                    "type": $("#searchType").val(),
                    "source": $("#searchSource").val(),
                    "contactsName": $("#searchContactsName").val(),
                    "pageNo": pageNo,
                    "pageSize": pageSize
                },
                type: "get",
                dataType: "json",
                success: function (data) {
                    $.each(data.dataList, function (index, item) {
                        html += '<tr><td><input type="checkbox" name="checkbox"/></td>';
                        html += '<td><a onclick="window.location.href=\'workbench/transaction/detail.do?id=' + item.id + '\';" style="text-decoration: none; cursor: pointer;">' + item.name + '</a></td>';
                        html += '<td>' + item.customerId + '</td>';
                        html += '<td>' + item.stage + '</td>';
                        html += '<td>' + item.type + '</td>';
                        html += '<td>' + item.owner + '</td>';
                        html += '<td>' + item.source + '</td>';
                        html += '<td>' + item.contactsId + '</td> </tr>';
                    });
                    $("#transBody").html(html);

                    let totalPages = Math.ceil(data.total / pageSize);

                    $("#transPage").bs_pagination({
                        currentPage: pageNo,
                        rowsPerPage: pageSize,
                        maxRowsPerPage: 20,   // 每页最多显示的记录条数
                        totalPages: totalPages, // 总页数
                        totalRows: data.total,  // 总记录数
                        visiblePageLinks: 3, // 显示几个卡片
                        showGoToPage: true,
                        showRowsPerPage: true,
                        showRowsInfo: true,
                        showRowsDefaultInfo: true,
                        onChangePage: function (event, data) {
                            getTransList(data.currentPage, data.rowsPerPage);
                        }
                    });
                }
            });
        }

    </script>
</head>
<body>


<div>
    <div style="position: relative; left: 10px; top: -10px;">
        <div class="page-header">
            <h3>交易列表</h3>
        </div>
    </div>
</div>

<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">

    <div style="width: 100%; position: absolute;top: 5px; left: 10px;">

        <div class="btn-toolbar" role="toolbar" style="height: 80px;">
            <form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">所有者</div>
                        <input class="form-control" type="text" id="searchOwner"/>
                        <input hidden id="hidden-searchOwner"/>
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">名称</div>
                        <input class="form-control" type="text" id="searchName"/>
                        <input hidden id="hidden-searchName"/>
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">客户名称</div>
                        <input class="form-control" type="text" id="searchCustomerName"/>
                        <input hidden id="hidden-searchCustomerName"/>
                    </div>
                </div>

                <br>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">阶段</div>
                        <select class="form-control" id="searchStage">
                            <option></option>
                            <c:forEach items="${stage}" var="s">
                                <option value="${s.value}">${s.text}</option>
                            </c:forEach>
                        </select>
                        <input hidden id="hidden-searchStage"/>
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">类型</div>
                        <select class="form-control" id="searchType">
                            <option></option>
                            <c:forEach items="${transactionType}" var="t">
                                <option value="${t.value}">${t.text}</option>
                            </c:forEach>
                        </select>
                        <input hidden id="hidden-searchType"/>
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">来源</div>
                        <select class="form-control" id="searchSource">
                            <option></option>
                            <c:forEach items="${source}" var="s">
                                <option value="${s.value}">${s.text}</option>
                            </c:forEach>
                        </select>
                        <input hidden id="hidden-searchSource"/>
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">联系人名称</div>
                        <input class="form-control" type="text" id="searchContactsName">
                        <input hidden id="hidden-searchContactsName">
                    </div>
                </div>

                <button class="btn btn-default" type="button" id="searchBtn">查询</button>

            </form>
        </div>
        <div class="btn-toolbar" role="toolbar"
             style="background-color: #F7F7F7; height: 50px; position: relative;top: 10px;">
            <div class="btn-group" style="position: relative; top: 18%;">
                <button class="btn btn-primary" onclick="window.location.href='workbench/transaction/save.jsp';"
                        type="button"><span
                        class="glyphicon glyphicon-plus"></span> 创建
                </button>
                <button class="btn btn-default" onclick="window.location.href='edit.html';" type="button"><span
                        class="glyphicon glyphicon-pencil"></span> 修改
                </button>
                <button class="btn btn-danger" type="button"><span class="glyphicon glyphicon-minus"></span> 删除</button>
            </div>


        </div>
        <div style="position: relative;top: 10px;">
            <table class="table table-hover">
                <thead>
                <tr style="color: #B3B3B3;">
                    <td><input type="checkbox" id="checkAll"/></td>
                    <td>名称</td>
                    <td>客户名称</td>
                    <td>阶段</td>
                    <td>类型</td>
                    <td>所有者</td>
                    <td>来源</td>
                    <td>联系人名称</td>
                </tr>
                </thead>
                <tbody id="transBody">
                </tbody>
            </table>
        </div>

        <%--style="height: 50px; position: relative;top: 20px;" --%>
        <div id="transPage">
        </div>

    </div>

</div>
</body>
</html>